<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本</title>
</head>
<body>
<h1 class="c">文本阴影</h1>
<div class="a">盒子阴影</div>
<div class="b">
    <img src="../img/rock600x400.jpg" alt="">
</div>
<div class="card">
    <div class="header">
        <h1>1</h1>
    </div>

    <div class="container">
        <p>January 1, 2016</p>
    </div>
</div>
<div class="d">
    溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出
    溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出
    溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出
    溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出 溢出
</div>
<div class="e">
    换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行
    换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行
    换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行
</div>
<style>
    .e{
        width:11em;
        border: 1px solid black;

    }
    .d{
        white-space: nowrap;
        width: 100px;
        height: 100px;
        text-align: center;
        border: 1px solid black;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .card{
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .header{
        padding: 100px;
        background-color: green;
        text-align: center;
    }
    .container{
        padding: 20px;
        text-align: center;
    }
    .b::after{
        content: "";
        position: absolute;
        z-index: 1;
        box-shadow: 0 15px 20px rgba(0,0,0,0.3);
        left:15%;
        height: 100%;
        bottom: 0;
    }
    .b{
        box-shadow: 1px 2px 4px  rgba(0, 0, 0, .5);

    }
    .b img{

        border: 1px solid #8a4419;
        border-style:inset;
    }
    .c{
        text-align: center;
        padding: 100px;
    }
    .a{
        box-shadow: 10px 10px 5px #888888;
    }
    .c{
        text-shadow: 5px 5px 5px #ff0000;
    }
</style>
</body>
</html>